<template>
	<view class="content padding-about-24">
		<uv-search placeholder="搜索商品" @custom="search" @search="search" v-model="keywords"></uv-search>
		<view class="margin-top-20 display-flex space-between align-items">
			<view class="font-size-26 font-weight-500">
				最近搜索
			</view>
			<view class="">
				<uv-icon @click="delhistoryDatas" name="trash" color="#707070" size="28"></uv-icon>
			</view>
		</view>
		<view class="display-flex flex-wrap">
			<template v-if="historyDatas.length">
				<view style="margin: 10rpx 7rpx;" @click="keywords = item,search()" v-for="item,index in historyDatas"
					:key="index" class="list">
					{{item}}
				</view>
			</template>
			<template v-else>
				<view style="font-size: 24rpx; margin-top: 120rpx;width: 100%;" class="text-center">
					暂无搜索记录
				</view>
			</template>
		</view>
		<view class="margin-top-20">
			<view class="font-size-26 font-weight-500">
				热门搜索
			</view>
			<view class="display-flex flex-wrap">
				<template>
					<view style="margin: 10rpx 7rpx;" @click="keywords = item,search()" v-for="item,index in hotlist"
						:key="index" class="list">
						{{item}}
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		nativeUI,
		navigateTo,
		navigateBack
	} from '@/utils/index.js';
	import * as api from '@/request/app.js'; // 引入api 方法
	import local from '@/utils/localStorage.js'; //引入本地存储方法
	var cityHistoryKey = 'cityHistoryKey'
	const keywords = ref('')
	var historyDatas = ref([])
	const hotlist = ref([])
	onLoad(function(option) {
		init()
		getsearch()
	});
	onShow(function() {});
	async function getsearch() {
		const {
			code,
			data
		} = await api.getsearch()
		if (code == 0) {
			hotlist.value = data.hot_search
		}
	}
	/**
	 * 初始化  历史记录
	 */
	function init() {
		var history = []
		if (uni.getStorageSync(cityHistoryKey)) {
			history = uni.getStorageSync(cityHistoryKey)
		} else {
			history = []
			uni.setStorageSync(cityHistoryKey, [])
		}
		historyDatas.value = history
	}
	/**
	 * 搜索
	 */
	async function search() {
		console.log(1);
		if (!keywords.value) return uni.$uv.toast('请输入您要搜索的内容！')
		var historydata = uni.getStorageSync(cityHistoryKey)
		var historydataStr = JSON.stringify(historydata)

		if (historydataStr.indexOf(keywords.value) == -1) {
			if (historydata.length < 10) {
				historydata.unshift(keywords.value)
			} else {
				historydata.pop()
				historydata.unshift(keywords.value)
			}
			uni.setStorageSync(cityHistoryKey, historydata)
			historyDatas.value = historydata
		}
		navigateTo('/pages/Home/searchresult/searchresult?keywords=' + keywords.value)
		keywords.value = ''
	}
	/**
	 * 情况本地搜索记录
	 */
	function delhistoryDatas() {
		uni.showModal({
			title: '提示',
			content: '您确定要清空搜索记录嘛？',
			success: function(res) {
				if (res.confirm) {
					uni.removeStorageSync(cityHistoryKey);
					historyDatas.value = uni.getStorageSync(cityHistoryKey)
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})

	}
	onReady(function() {});
	onReachBottom(function() {});
</script>

<style scoped lang="scss">
	.yuan {
		width: 30rpx;
		height: 30rpx;
		background: #EBEBEB;
	}

	.list {
		background-color: #F3F3F3;
		border-radius: 50rpx;
		padding: 16rpx 40rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
	}

	.content {
		min-height: 100vh;
		background: #FFFFFF;
	}
</style>